<template>
  <transition
    class="linpeng-compnent"
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
    <div
      v-show="page.dialogVisible"
      class="el-dialog__wrapper linpeng-dialog-plugin"
      :class="{ 'show-model': !page.dialogModal }"
    >
      <div
        ref="dialog"
        role="dialog"
        aria-modal="true"
        class="el-dialog"
        :style="style"
        :aria-label="page.title || 'dialog'"
        :class="{ 'arrow-down-active': page.arrowDownActive }"
      >
        <div class="el-dialog__header cursor">
          <span
            slot="title"
            class="el-dialog__title"
            style="cursor: move"
            :title="page.title"
          >
            <span>{{ page.title }}</span>
            <i
              v-if="page.arrowDownIcon"
              class="el-icon-arrow-down diag-arrow-down"
              @click.stop="page.arrowDownActive = !page.arrowDownActive"
            />
            <button
              type="button"
              class="el-dialog__headerbtn"
              aria-label="Close"
              @click="close"
            >
              <i class="el-dialog__close el-icon el-icon-close" />
            </button>
          </span>
        </div>
        <div class="el-dialog__body"><slot /></div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <div
            v-if="$slots.footer"
            class="el-dialog__footer"
          >
            <slot name="footer" />
          </div>
        </span>
      </div>
      <!--            </el-dialog>-->
    </div>
  </transition>
</template>
<script>
import './directive/el-drag-dialog/index';
export default {
  name: 'LindadayoDialog',
  extends: window.ELEMENT.Dialog,
  props: {
    /**
     * @description 弹窗信息
     */
    page: {
      // 学段科目
      type: Object,
      default: () => {},
    },
    /**
     * @description 是否把弹框加入到body元素下的层级
     */
    appendToBody: {
      type: Boolean,
      default: false,
    },
    /**
     * @description 弹框层级
     */
    dialogZIndex: {
      type: [Number, String],
      default: '',
    },
  },
  watch: {
    'page.dialogVisible': {
      handler(val) {
        if (val && this.dialogZIndex) this.setDialogZIndex();
      },
    },
  },
  mounted() {
    if (this.appendToBody) {
      const bodyElement = document.querySelector('body');
      bodyElement.appendChild(this.$el);
    }
    this.dialogZIndex && this.setDialogZIndex();
  },
  methods: {
    /**
     * @description 关闭弹框
     */
    close(e) {
      if (e) {
        e.stopPropagation();
      }
      this.$emit('closeModal');
    },
    /**
     * @description 设置弹框层级
     */
    setDialogZIndex() {
      this.$nextTick(() => {
        // 当有多个linpeng-dialog弹窗重叠设置层级
        const dom = document.getElementsByClassName('linpeng-dialog-plugin');
        if (dom.length > 0) {
          for (let i = 0; i < dom.length; i++) {
            dom[i].style.zIndex = this.$el === dom[i] ? this.dialogZIndex + 1 : this.dialogZIndex;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.linpeng-compnent {
  position: relative;
  .linpeng-icon-linpeng {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('./images/icon_tool_ocr.png');
    background-size: 16px;
  }
}
.el-dialog__footer {
  padding: 20px;
}
.linpeng-choose-points-diag > .el-dialog .el-dialog__header .el-dialog__title i {
  margin-left: auto;
  margin-right: 30px;
  cursor: pointer;
}
.el-dialog .el-dialog__header .el-dialog__title {
  display: flex;
  color: #ffae0d;
  border-bottom: 1px solid #ffae0d;
  padding-bottom: 10px;
}
.diag-arrow-down {
  margin-left: auto;
  margin-right: 30px;
  cursor: pointer;
  font-size: 18px;
  color: #909399;
}
.arrow-down-active {
  .el-dialog__body,
  .el-dialog__footer {
    height: 0;
    padding: 0 20px !important;
    overflow: hidden;
  }
}
.show-model {
  height: 0;
  overflow: inherit !important;
}
</style>
